<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>扫雷游戏</title>
    <style>
        .mainGame {
            /* 	width: 300px;
                height: 240px; */
            background-color: #d8e7d7;
            margin-left: auto;
            margin-right: auto;
            box-shadow: 10px 10px 2px 5px #b7a7b7;
            border-radius: 8px;
            padding: 10px;
            transition-duration: 0.3s;
        }


        .block {
            float: left;
            width: 50px;
            height: 35px;
            background-color: #76f897;
            text-align: center;
            border: 1px solid #faffbb;
            padding-top: 15px;
            border-radius: 8px;

            margin-top: 5px;
            margin-left: 5px;
        }

        a {
            margin-left: 5px;

        }

        h1 {
            width: 100%;
            text-align: center;
        }

        .SelectList {
            width: 100%;
            text-align: center;
        }

        .titleTxt {
            width: 100%;
            text-align: center;
        }

        @keyframes RotateAnimation {
            0% {
                transform: rotateY(180deg);
            }
            100% {
                transform: rotateY(360deg);

            }
        }


        /*不是地雷*/
        .noMineBlock {
            animation: RotateAnimation 1s normal;
            background-color: #7a85c5;
        }

        /*mineBlock:标记样式*/
        .stopMineBlock {
            background-color: #faa4a4;
        }

        /*是地雷*/
        .thereMinBlock {
            animation: RotateAnimation 1s normal;
            background-color: #f4511e;
        }

        /*成功时的地雷*/
        .CgMinBlock {
            animation: RotateAnimation 1s normal;
            background-color: #dbcb39;
        }

        .button {
            display: inline-block;
            border-radius: 4px;
            background-color: #f4511e;
            border: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 14px;
            padding: 10px;
            width: 150px;

            cursor: pointer;
            margin: 5px;
        }
    </style>
</head>
<body>

<h1>扫雷游戏</h1>
<div class="SelectList">
    <button class="button" onclick="ResetGame()">重置游戏</button>
    <button class="button" onclick="StartNewGame()">重新开始新游戏</button>
</div>
<div class="SelectList">
    <a href="#" onclick="initMainInterface(5,5,3)">简单</a>
    <a href="#" onclick="initMainInterface(8,8,5)">平常</a>
    <a href="#" onclick="initMainInterface(11,11,16)">困难</a>
<!--    <a href="#" onclick="custom()">自定义</a>-->
</div>


<h4 class="titleTxt"></h4>
<!-- 游戏主窗口 -->
<div class="mainGame" style="visibility: hidden"></div>
</body>
</html>

<script>
    function custom() {
        let Width = parseInt(prompt("请输入宽：", ""));

        while (Width <= 0 || !Width) {
            Width = parseInt(prompt("数据有误请重新输入宽：", ""));
        }

        let Height = parseInt(prompt("请输入高：", ""));
        while (Height <= 0 || !Height) {
            Height = parseInt(prompt("数据有误请重新输入高：", ""));
        }

        let Mine = parseInt(prompt("请输入雷的数量：", ""));
        while (Mine <= 0 || Mine >= (Height * Width) || !Mine) {
            Mine = parseInt(prompt("数据有误请重新输入雷的数量：", ""));
        }

        initMainInterface(Width, Height, Mine)
    }

    //游戏宽度
    let mainGameWidth;
    //游戏高度
    let mainGameHeight;
    //游戏的地雷数量
    let mainMineQuantity;
    //游戏的随机数组
    let randomArrays_id;

    //重置游戏
    function ResetGame() {
        if (!mainGameWidth > 0 && !mainGameHeight > 0 && !mainMineQuantity > 0) {
            return;
        }
        let game = document.getElementsByClassName("block");
        for (let i = 0; i < game.length; i++) {
            const element = game[i];
            element.setAttribute("class", "block");
            element.innerHTML = "";
        }
    }

    //开始新游戏
    function StartNewGame() {
        if (!mainGameWidth > 0 && !mainGameHeight > 0 && !mainMineQuantity > 0) {
            return;
        }
        initMainInterface(mainGameWidth, mainGameHeight);
        initMine(mainMineQuantity);
    }

    //初始化主界面
    function initMainInterface(wide, high, mineQuantity) {
        mainGameWidth = wide;
        mainGameHeight = high;
        let game = document.getElementsByClassName("mainGame");
        const element = game[0];
        //设置主窗口的宽度,高度
        element.style.width = wide * (58) + "px";
        element.style.height = high * (58) + "px";
        element.style.visibility = "visible";
        //清除HTML的内容
        element.innerHTML = "";
        //添加方块
        setTimeout(() => {
            for (let i = 0; i < wide; i++) {
                for (let j = 0; j < high; j++) {
                    element.innerHTML += "<div class=\"block\" data-id = " + i + "," + j + " ></div>";
                }
            }
            addMineClickEvents();
            initMine(mineQuantity)
        }, 300);
    }

    //初始化地雷参数
    function initMine(mineQuantity) {
        mainMineQuantity = mineQuantity;
        let game = document.getElementsByClassName("titleTxt");
        const element = game[0];
        element.innerHTML = "";
        element.innerHTML = "地雷数量：" + mineQuantity;
        //获取随机数组
        randomArrays_id = randomArrays(mineQuantity);
        console.log(randomArrays_id)
    }

    //添加地雷和点击事件
    //地雷数量
    function addMineClickEvents() {

        //设置当前非地雷的数量
        let onclickQuantity = 0;

        document.oncontextmenu = function () {
            return false;
        }

        let game = document.getElementsByClassName("block");
        for (let i = 0; i < game.length; i++) {
            const element = game[i];
            //设置右击事件
            element.addEventListener("contextmenu", function () {
                let elementClass = element.getAttribute("class");

                if (elementClass.indexOf("thereMinBlock") >= 0 || elementClass.indexOf("noMineBlock") >= 0) {
                    return;
                }
                //停止
                if (elementClass.indexOf("stopMineBlock") >= 0) {
                    element.setAttribute("class", "block");
                } else {
                    element.setAttribute("class", "block stopMineBlock");
                }
            })
            //设置左击事件
            element.onclick = function () {
                let elementClass = element.getAttribute("class");
                if (elementClass.indexOf("noMineBlock") >= 0 || elementClass.indexOf("stopMineBlock") >= 0 || elementClass.indexOf("thereMinBlock") >= 0) {
                    return;
                }
                let dataId = element.getAttribute("data-id")
                /*
                 element.setAttribute("class", "block RotateAnimationBlock");
                 console.log("非地雷的数量:" + onclickQuantity);
                 console.log("面积："+mainGameWidth+",*,"+mainGameHeight+",="+mainGameWidth*mainGameHeight);
                 console.log("地雷数量："+mainMineQuantity);
                 console.log("结束条件"+ (mainGameWidth*mainGameHeight-mainMineQuantity).toString() );
                */

                // judgmentMine判断当前的方块是不是地雷 randomArrays_id 随机输出数组 dataId 当前组件的id
                if (judgmentMine(randomArrays_id, dataId)) {
                    onclickQuantity = 0;
                    element.setAttribute("class", "block stopMineBlock");
                    failureEvents();
                } else {
                    element.setAttribute("class", "block noMineBlock");
                    element.innerHTML = getNeighborhoodMinesNumber(randomArrays_id, dataId).toString();

                    onclickQuantity++;


                    if (onclickQuantity === (mainGameWidth * mainGameHeight - mainMineQuantity)) {
                        onclickQuantity = 0;
                        successEvents();

                    }
                }

            }
        }
    }

    //失败事件
    function failureEvents() {
        let game = document.getElementsByClassName("block");
        for (let i = 0; i < game.length; i++) {
            const element = game[i];
            let elementClass = element.getAttribute("class");
            if (elementClass === "block" || elementClass === "block stopMineBlock") {
                let dataId = element.getAttribute("data-id")
                // judgmentMine判断当前的方块是不是地雷 Arrays_id 随机输出数组 dataId 当前组件的id
                if (judgmentMine(randomArrays_id, dataId)) {
                    element.setAttribute("class", "block thereMinBlock");
                } else {
                    element.setAttribute("class", "block noMineBlock");
                    element.innerHTML = getNeighborhoodMinesNumber(randomArrays_id, dataId).toString();
                }
            }
        }
        setTimeout(() => {
            alert("游戏结束");
        }, 600);
    }

    //成功事件
    function successEvents() {
        let game = document.getElementsByClassName("block");
        for (let i = 0; i < game.length; i++) {
            const element = game[i];
            let dataId = element.getAttribute("data-id")
            // judgmentMine判断当前的方块是不是地雷 Arrays_id 随机输出数组 dataId 当前组件的id
            if (judgmentMine(randomArrays_id, dataId)) {
                element.setAttribute("class", "block CgMinBlock");
            }
        }

        setTimeout(() => {
            alert("游戏成功")
        }, 600)
    }

    //获取附近的地雷数量
    //getNeighborhoodMinesNumber
    function getNeighborhoodMinesNumber(Arrays_id, clickId) {
        //console.log(clickId)
        let tmp_x = parseFloat(clickId.split(',')[0]);
        let tmp_y = parseFloat(clickId.split(',')[1]);
        // console.log("clickId_x + 1 :" + (tmp_x + 1) + " , clickId_x - 1 :" + (tmp_x - 1) + " , clickId_y + 1 :" + (tmp_y + 1) + " , clickId_y - 1: " + (tmp_y - 1));
        //计数
        let count = 0
        for (let i = 0; i < Arrays_id.length; i++) {
            let id = Arrays_id[i].split(',');
            let Arrays_id_x = parseFloat(id[0]);
            let Arrays_id_y = parseFloat(id[1]);

            if (Arrays_id_x <= (tmp_x + 1) && Arrays_id_x >= (tmp_x - 1) && Arrays_id_y <= (tmp_y + 1) && Arrays_id_y >= (tmp_y - 1)) {
                count++;
            }
        }
        return count;
    }


    //获取随机数组
    // randomQuantity 随机数组的长度
    function randomArrays(randomQuantity) {
        let game = document.getElementsByClassName("block");
        let Arrays = [];
        for (let i = 0; i < game.length; i++) {
            Arrays[i] = game[i].getAttribute("data-id");
        }
        //打乱数组顺序并截取相应的长度
        return shuffle(Arrays).slice(0, randomQuantity);
    }


    //打乱数组顺序
    //arr 想要打乱的数组
    function shuffle(arr) {
        let len = arr.length;
        for (let i = 0; i < len - 1; i++) {
            let index = parseInt(Math.random() * (len - i));
            let temp = arr[index];
            arr[index] = arr[len - i - 1];
            arr[len - i - 1] = temp;
        }
        return arr;
    }

    //判断当前的方块是不是地雷
    //Arrays_id 地雷的集合
    //id 要判断的方块
    function judgmentMine(Arrays_id, id) {
        for (let j = 0; j < Arrays_id.length; j++) {
            if (id === Arrays_id[j]) {
                return true;
            }
        }
        return false;
    }

</script>